<template>
  <div>
    {{ hello }}
    <a-form
      ref="formRef"
      :model="info"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item ref="name" label="Activity name" name="name">
        <a-input v-model:value="info.name" />
      </a-form-item>
      <a-form-item ref="email" label="Activity email" name="email">
        <a-input v-model:value="info.email" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit">Create</a-button>
        <a-button style="margin-left: 10px" @click="resetForm">Reset</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
  import { ref, reactive, toRaw } from 'vue'
  export default {
    props: {
      msg: String,
      myInfo: Object,
    },
    setup(props, { emit }) {
      const hello = ref(props.msg)
      const formRef = ref()
      //   let myData = {
      //     name: '',
      //     email: '',
      //   }
      const info = ref(props.myInfo)
      const formState = reactive({
        info: Object,
      })
      formState.info = info.value
      console.log(formState.info)
      const rules = {
        name: [
          {
            required: true,
            message: 'Please input Activity name',
            trigger: 'blur',
          },
          {
            min: 3,
            max: 5,
            message: 'Length should be 3 to 5',
            trigger: 'blur',
          },
        ],
        email: [
          {
            required: true,
            message: 'Please input Activity eamil',
            trigger: 'blur',
          },
          {
            min: 3,
            max: 5,
            message: 'Length should be 3 to 5',
            trigger: 'blur',
          },
        ],
      }
      const onSubmit = () => {
        formRef.value
          .validate()
          .then(() => {
            console.log('values', formState, toRaw(formState))
            emit('myInfo', formState)
          })
          .catch((error) => {
            console.log('error', error)
          })
      }

      const resetForm = () => {
        formRef.value.resetFields()
      }
      return {
        hello,
        formRef,
        formState,
        rules,
        info,
        labelCol: {
          span: 4,
        },
        wrapperCol: {
          span: 14,
        },
        onSubmit,
        resetForm,
      }
    },
  }
</script>
